/* 顶部按钮 */
.topButtonSwitch {
	z-index: 1;
}

.topswitch {
	width: 100upx;
	height: 100upx;
	background-color: #333;
	/* 经典黑色，像遥控器按键 */
	margin: 50upx 0 0 50upx;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	/* 完美圆形 */
	border: 2upx solid #555;
	/* 可选：轻微边框，增加层次 */
	box-shadow: 0 2upx 6upx rgba(0, 0, 0, 0.3);
	/* 可选：轻微阴影，立体感 */
	transition: background-color 0.1s ease;
	/* 平滑过渡效果 */
}

/* 按下时的反馈（模拟遥控器按下） */
.topswitch:active {
	background-color: #222;
	/* 按下时颜色更深一点 */
	transform: scale(0.95);
	/* 轻微缩小，增强按压感（可选） */
}

/* 蓝牙连接 */
.maskLayer {
	/* 蓝牙菜单遮罩层 */

	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;

}

.x {
	border: black;
}

/* 图标样式：占按钮的 60%，保持居中显示 */
.topswitch>image {
	width: 60%;
	height: 60%;
}

/* 主容器样式 */
.container {
	width: 100%;
	height: 100%;
	position: fixed;
	padding: 20rpx;
	/* background-color: #22262B; */
	min-height: 100vh;
	background: linear-gradient(135deg, #1a1a2e, #16213e);

}

/* 折叠面板样式 */
.uni-collapse {
	margin-bottom: 20rpx;
	border-radius: 12rpx;
	overflow: hidden;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
}

/* 折叠面板标题样式 */
.uni-collapse-item__title {
	background-color: #3498db;
	color: white;
	font-weight: bold;
	padding: 24rpx 30rpx;
}

/* 折叠面板内容样式 */
.uni-collapse-item__wrap-content {
	background-color: white;
	padding: 20rpx;
}

/* 按钮通用样式 */
.btn {
	border: none;
	border-radius: 8rpx;
	padding: 16rpx 24rpx;
	font-size: 28rpx;
	font-weight: 500;
	margin: 10rpx;
	transition: all 0.3s;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
}

/* 蓝牙按钮样式 */
.bluetooth-btn {
	background-color: #3498db;
	color: white;
}

.bluetooth-btn:active {
	background-color: #2980b9;
}

/* 搜索按钮样式 */
.search-btn {
	background-color: #2ecc71;
	color: white;
}

.search-btn:active {
	background-color: #27ae60;
}

/* 关闭按钮样式 */
.shut-btn {
	background-color: #222;
	color: white;
}

.shut-btn:active {
	background-color: #7f8c8d;
}

/* 操作按钮区域 */
.action-buttons {
	display: flex;
	justify-content: space-between;
	margin-bottom: 20rpx;
}

/* 分区标题样式 */
.section-title {
	font-size: 30rpx;
	font-weight: bold;
	color: #333;
	margin: 20rpx 0 15rpx;
	padding-bottom: 10rpx;
	border-bottom: 1rpx solid #eee;
}

/* 提示文本样式 */
.tip-text {
	font-size: 24rpx;
	color: #e74c3c;
	margin-bottom: 10rpx;
	font-weight: normal;
}

/* 设备列表容器 */
.paired-list,
.unpaired-list {
	max-height: 300rpx;
	border: 1rpx solid #eee;
	border-radius: 8rpx;
	margin-bottom: 20rpx;
}

/* 设备项样式 */
.paired-item,
.unpaired-item {
	padding: 20rpx;
	border-bottom: 1rpx solid #f0f0f0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.paired-item:last-child,
.unpaired-item:last-child {
	border-bottom: none;
}

/* 设备信息样式 */
.device-info {
	flex: 1;
}

/* 已选中标签样式 */
.selected-tag {
	color: #2ecc71;
	font-size: 24rpx;
}

/* 删除按钮样式 */
.delete-btn {
	color: #e74c3c;
	font-size: 24rpx;
	padding: 8rpx 12rpx;
	border-radius: 6rpx;
	background-color: rgba(231, 76, 60, 0.1);
}

/* 发送区域样式 */
.send-section {
	background-color: white;
	border-radius: 12rpx;
	padding: 20rpx;
	margin-top: 20rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
}

/* 控制按钮组样式 */
.button-group {
	margin-bottom: 30rpx;
}

.group-title {
	font-size: 28rpx;
	color: #7f8c8d;
	margin-bottom: 15rpx;
}

.group-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 15rpx;
}

/* 控制按钮样式 */
.control-btn {
	background-color: #3498db;
	color: white;
	border: none;
	border-radius: 8rpx;
	padding: 12rpx 20rpx;
	font-size: 26rpx;
	transition: all 0.2s;
	flex-grow: 1;
	min-width: 30%;
	text-align: center;
	box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
}

.control-btn:active {
	background-color: #2980b9;
	transform: translateY(2rpx);
}

/* 底部按钮区域 */
.footer-buttons {
	margin-top: 40rpx;
	display: flex;
	justify-content: center;
}

/* 关闭按钮样式 */
.close-btn {
	background-color: #e74c3c;
	color: white;
	width: 60%;
}

.close-btn:active {
	background-color: #c0392b;
}

/* 响应式调整 */
@media (min-width: 768px) {
	.container {
		padding: 40rpx;
		max-width: 750px;
		margin: 0 auto;
	}

	.action-buttons {
		justify-content: flex-start;
	}

	.btn {
		margin-right: 20rpx;
	}

	.paired-list,
	.unpaired-list {
		max-height: 400rpx;
	}
}

/* 单独按钮样式 */
.control-item {
	margin-bottom: 20rpx;
}

.control-btn-single {
	width: 100%;
	margin-bottom: 20rpx;

}

/* 音量控件 */
.volumeNavBar {
	margin: auto;
	margin-top: 40rpx;
	width: 70%;
	height: 100rpx;
	box-shadow: 10rpx 5rpx 10rpx rgba(0, 0, 0, 0.5);
	background: linear-gradient(to right, #333941, #aab2bc);
	border-radius: 40rpx;
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 0 20rpx;
}

.volumeNavBar view {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 70rpx;
	height: 70rpx;
}

.volumeNavBar image {
	width: 60rpx;
	height: 60rpx;
	object-fit: contain;
}

/* 方向控制 */
/* 外层容器，你后续可自行控制其定位或居中 */
.directionControlBox {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 40rpx;
}

/* 圆形方向控制盘 */
.direction-circle {
	position: relative;
	margin-top: 100rpx;
	width: 500rpx;
	height: 500rpx;
	border-radius: 50%;
	background: linear-gradient(to right, #333941, #aab2bc);
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.3);
	border: 4rpx solid rgba(255, 255, 255, 0.1);
}

/* 方向按钮基础样式 */
.direction-btn {
	position: absolute;
	width: 200rpx;
	height: 200rpx;
	border-radius: 50%;
	/* background: linear-gradient(135deg, #4a5568, #2d3748); */
	display: flex;
	justify-content: center;
	align-items: center;
	/* box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.4); */
	/* border: 2rpx solid rgba(255, 255, 255, 0.1); */
	transition: all 0.2s ease;
}

.direction-btn:active {
	/* transform: scale(0.9); */
	transform: scale(1.5);
	/* background: linear-gradient(135deg, #2d3748, #4a5568); */
}

/* 四个方向按钮定位 */
.direction-up {
	top: 20rpx;
	left: 50%;
	transform: translateX(-50%);
}

.direction-down {
	bottom: 20rpx;
	left: 50%;
	transform: translateX(-50%);
}

.direction-left {
	left: 20rpx;
	top: 50%;
	transform: translateY(-50%);
}

.direction-right {
	right: 20rpx;
	top: 50%;
	transform: translateY(-50%);
}

/* OK 按钮 */
.ok-btn {
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
	background: linear-gradient(135deg, #48bb78, #38a169);
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 6rpx 20rpx rgba(72, 187, 120, 0.4);
	border: 3rpx solid rgba(255, 255, 255, 0.2);
	transition: all 0.2s ease;
}

.ok-btn:active {
	transform: scale(0.95);
	background: linear-gradient(135deg, #38a169, #48bb78);
}

/* OK 按钮文字 */
.ok-text {
	font-size: 28rpx;
	color: #ffffff;
	font-weight: bold;
	letter-spacing: 2rpx;
}
/* 小按钮 */
/* 小按钮 - 统一美化版本 */
.minBut {
    width: 100upx;
    height: 100upx;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
    box-shadow: 0 4upx 12upx rgba(0, 0, 0, 0.15);
    margin: 0 8upx;
    background: linear-gradient(135deg, #4a5568, #2d3748);
}

/* 占位按钮样式稍有不同 */
.minBut.placeholder {
    opacity: 0.6;
    background: linear-gradient(135deg, #2c3e50, #34495e);
}

/* 按钮点击效果 */
.minBut:active {
    transform: scale(0.9);
    box-shadow: 0 2upx 8upx rgba(0, 0, 0, 0.2);
}

/* 按钮悬浮效果 */
.minBut:hover {
    transform: translateY(-2upx);
    box-shadow: 0 6upx 16upx rgba(0, 0, 0, 0.2);
}

/* 图标样式 */
.minBut > image {
    width: 60%;
    height: 60%;
    transition: all 0.3s ease;
}

/* 为占位按钮调整图标 */
.minBut.placeholder > image {
    filter: none;
}

/* 按钮容器 */
.bottonNav {
    width: 100%;
    height: 120rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 20upx;
    margin: 10upx 0;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20upx;
    backdrop-filter: blur(10upx);
}

/* 响应式调整 */
@media screen and (max-width: 750upx) {
    .minBut {
        width: 90upx;
        height: 90upx;
        margin: 0 6upx;
    }
    
    .minBut > image {
        width: 55%;
        height: 55%;
    }
    
    .bottonNav {
        height: 110rpx;
        padding: 0 15upx;
    }
}

/* 可选：添加脉冲动画效果 */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
    }
    70% {
        box-shadow: 0 0 0 10upx rgba(255, 255, 255, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

/* 为活跃按钮添加脉冲效果（可选） */
.minBut.active {
    animation: pulse 1.5s infinite;
}